
<template>
<div class="card">
    <el-form class="form">
      <el-form-item>
        <el-input v-model="data.orderNumber" placeholder="请输入订单编号" width="200px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadReturnOrderList">查询</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
</div>
  <div class="card">
    <el-table :data="data.returnOrderList" stripe style="width: 100%">
      <!-- 订单编号 -->
      <el-table-column prop="orderNumber" label="订单编号" width="180" align="center"></el-table-column>

      <!-- 订单状态 -->
      <el-table-column prop="orderStatus" label="订单状态" width="120" align="center">
        <template #default="scope">
          <el-tag :type="getStatusTagType(scope.row.orderStatus)">
            {{ getStatusText(scope.row.orderStatus) }}
          </el-tag>
        </template>
      </el-table-column>


      <!-- 订单总价 -->
      <el-table-column prop="totalPrice" label="订单总价" width="120" align="center">
        <template #default="scope">
          {{ formatPrice(scope.row.totalPrice) }}
        </template>
      </el-table-column>

      <!-- 支付方式 -->
      <el-table-column prop="paymentMethod" label="支付方式" width="120" align="center">
        <template #default="scope">
          {{ getPaymentMethodText(scope.row.paymentMethod) }}
        </template>
      </el-table-column>
      <!-- 生成订单员工姓名 -->
      <el-table-column prop="userName" label="生成订单员工姓名" width="120" align="center"></el-table-column>
      <!--    订单详情按钮-->
      <el-table-column label="查看订单详情" width="180" align="center">
        <template v-slot="scope">
          <el-button type="primary" size="small" @click="handleloadDetails(scope.row)">查看订单详情</el-button>
        </template>
      </el-table-column>
      <!-- 下单日期 -->
      <el-table-column prop="orderCreateDate" label="下单日期" width="180" align="center"></el-table-column>


      <!-- 订单状态修改人 -->
      <el-table-column prop="updateUserName" label="修改订单状态的员工姓名" width="120" align="center"></el-table-column>

      <!-- 订单状态修改日期 -->
      <el-table-column prop="orderUpdateDate" label="修改日期" width="180" align="center"></el-table-column>

      <!-- 删除状态 -->
<!--      <el-table-column prop="deletedStatus" label="删除状态" width="120" align="center">-->
<!--        <template #default="scope">-->
<!--          <el-tag :type="scope.row.deletedStatus === '0' ? 'success' : 'danger'">-->
<!--            {{ scope.row.deletedStatus === '0' ? '未删除' : '已删除' }}-->
<!--          </el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->

      <!-- 退货原因 -->
      <el-table-column prop="returnReason" label="退货原因" width="200" align="center"></el-table-column>
      <!-- 操作列 -->
      <el-table-column label="操作" width="180" align="center" fixed="right" >
        <template #default="scope" >
          <el-button type="success" size="small" @click="reviewReturnOrder('agree',scope.row)" v-if="scope.row.orderStatus ==='2'">同意</el-button>
          <el-button type="danger" size="small" @click="reviewReturnOrder('refuse',scope.row)" v-if="scope.row.orderStatus ==='2'">拒绝</el-button>
          <el-tag v-if="scope.row.orderStatus ==='4'" type="info">{{scope.row.refuseReturnReason}}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
          style="margin-top: 5px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="data.pageNum"
          :page-sizes="[3, 5, 10, 15, 20]"
          :page-size="data.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.total">
      </el-pagination>
    </div>
  </div>

  <!-- 订单详情Dialog-->
  <el-dialog v-model="data.dialogVisible" title="订单详情" width="60%" center>
    <el-table :data="data.orderDetailsList" stripe style="width: 100%; margin-top: 20px;">
      <el-table-column prop="productName" label="药品名称"></el-table-column>
      <el-table-column label="药品图片">
        <template #default="scope">
          <img :src="scope.row.imageUrl" alt="药品图片" class="product-image">
        </template>
      </el-table-column>
      <el-table-column prop="price" label="药品单价"></el-table-column>
      <el-table-column prop="quantity" label="购买数量"></el-table-column>
      <el-table-column prop="totalPrice" label="总价格"></el-table-column>
    </el-table>
    <div class="dialog-footer">
      <el-button type="primary" @click="data.dialogVisible = false" class="close-button">关闭</el-button>
    </div>
  </el-dialog>
<!--拒绝退货dialog-->
  <el-dialog v-model="data.returnVisible" title="拒绝退货" width="50%">
    <el-form :model="data.formData" label-width="120px" style="padding: 20px;">
      <el-form-item label="拒绝退货理由" prop="returnRefuseReason" >
        <el-input
            v-model="data.formData.refuseReturnReason"
            placeholder="请输入退货原因"
            type="textarea"
            style="width: 100%; max-width: 600px;"
        ></el-input>
      </el-form-item>
      <el-form-item style="text-align: right; margin-top: 20px;">
        <el-button type="danger" @click="cancel">取消</el-button>
        <el-button type="primary"  style="margin-left: 10px;" @click="handelReviewReturnOrder">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {loadOrderDetailApi, loadOrderListApi,updateOrderStatusApi} from "@/utils/API/orders/manageOrder";
import {ElMessage} from "element-plus";
import {reactive} from "vue";

const data = reactive({
  returnOrderList: [],
  total:0,
  pageNum:1,
  pageSize:10,
  orderDetailsList: [],
  dialogVisible: false,
  returnVisible: false,
  formData:{},
  orderNum:"",
  operation:"",
  orderNumber:""
})

const loadReturnOrderList=()=>{
  let param ={
    orderNumber:data.orderNumber,
    orderStatus: '2',
    pageNum:data.pageNum,
    pageSize:data.pageSize
  }
  loadOrderListApi(param).then(res=>{
    if(res.code==='200'){
      data.returnOrderList = res.data?.list
      data.total = res.data?.total
      console.log(res)
    }else{
      ElMessage.error(res.msg)
    }
  })
}
loadReturnOrderList()
const reset =()=>{
  data.orderNumber = ""
  loadReturnOrderList()

}
// 处理页码改变
const handleSizeChange = (pageSize) => {
  data.pageSize = pageSize;
  loadReturnOrderList()
};

// 处理页码变化
const handleCurrentChange = (pageNum) => {
  data.pageNum = pageNum;
  loadReturnOrderList()
};
// 查看订单详情操作
const handleloadDetails = (row) => {
  data.dialogVisible = true
  let  param ={
    orderId:row.orderId
  }
  loadOrderDetailApi(param).then(res=>{
    if (res.code==='200'){
      data.orderDetailsList = processDetails(res.data.orderProducts)
      data.dialogVisible = true
      console.log(res)
      console.log(data.orderDetailsList)
    }else {
      ElMessage.error(res.msg)
    }
  })
};
//处理订单详情
const processDetails = (products) => {
  return products.map(item => {
    return {
      ...item.product,
      quantity: item.quantity,
      totalPrice: item.product.price * item.quantity
    };
  });
};
// 格式化价格
const formatPrice = (price) => {
  return `￥${price.toFixed(2)}`;
};

// 获取订单状态文本
const getStatusText = (status) => {
  switch (status) {
    case '0':
      return "未支付";
    case '1':
      return "已支付";
    case '2':
      return "退货中";
    case '3':
      return "退货成功";
    default:
      return "拒绝退货";
  }
};

// 获取订单状态标签类型
const getStatusTagType = (status) => {
  switch (status) {
    case '0':
      return "warning";
    case '1':
      return 'success';
    case '2':
      return "info";
    case '3':
      return "primary";
    default:
      return "danger";
  }
};
// 获取支付方式文本
const getPaymentMethodText = (method) => {
  switch (method) {
    case '0':
      return "未支付";
    case '1':
      return "微信支付";
    case '2':
      return "支付宝支付";
    default:
      return "未知支付方式";
  }
};
//同意或拒绝按钮事件绑定
const reviewReturnOrder = (op,row) => {
  data.formData = JSON.parse(JSON.stringify(row))//确保当formData的数据改变时，row数据不变
  data.operation= op
  if(op==='agree'){
    data.formData.orderStatus = '3'

    handelReviewReturnOrder()
  }else{
    data.returnVisible = true
    data.formData.orderStatus = '4'
  }

}
const handelReviewReturnOrder = () => {
  console.log(data.formData)

  updateOrderStatusApi(data.formData).then(res=>{
    if(res.code==='200'){
      if(data.operation === 'agree'){
        ElMessage.success("退货成功")
      }else{
        ElMessage.success("拒绝退货成功")
      }
      loadReturnOrderList()
      data.returnVisible = false
    }else{
      ElMessage.error(res.msg)
    }
  })
}

const cancel = () => {
  data.returnVisible = false
  data.formData = {}
}
</script>

<style scoped>
/* 表单样式 */
.form {
  display: flex;
  align-items: center;
}

.form .el-form-item {
  margin-right: 20px;
  margin-bottom: 0;
}

.form .el-input {
  width: 200px;
}

/* 表格样式 */
.card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.el-table {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
  padding: 12px 0;
}

.el-table td {
  padding: 12px 0;
}

.el-table .el-tag {
  margin: 2px;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* 订单详情Dialog */
.el-dialog {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.el-dialog__header {
  padding: 16px 24px;
  border-bottom: 1px solid #e4e7ed;
  background-color: #f5f7fa;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.el-dialog__title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.el-dialog__body {
  padding: 24px;
}

.product-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

.close-button {
  background-color: #409eff;
  border-color: #409eff;
  color: #ffffff;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.close-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

/* 退货Dialog */
.el-form {
  padding: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-form-item__label {
  font-weight: 500;
  color: #606266;
}

.el-input, .el-textarea, .el-select {
  width: 100%;
  max-width: 600px;
}

.el-textarea__inner {
  border-radius: 8px;
  padding: 10px;
}

.el-select {
  width: 100%;
  max-width: 300px;
}

.el-button {
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.el-button--danger {
  background-color: #f56c6c;
  border-color: #f56c6c;
  color: #ffffff;
}

.el-button--danger:hover {
  background-color: #f78989;
  border-color: #f78989;
}

.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
  color: #ffffff;
}

.el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}
</style>